<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>读取 CSV 文件示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse; /* 合并相邻边框 */
        }

        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd; /* 添加边框线 */
        }

        tr:nth-child(even) {
            background-color: #f2f2f2; /* 偶数行背景色 */
        }
    </style>
</head>

<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>league</th>
                <th>bs_num_id</th>
                <th>bs_time</th>
                <th>hometeam</th>
                <th>awayteam</th>
                <th>home_odd</th>
                <th>draw_odd</th>
                <th>away_odd</th>
                <th>home</th>
                <th>draw</th>
                <th>away</th>
                <!-- 添加其他表头 -->
                <th>pred_home</th>
                <th>pred_draw</th>
                <th>pred_away</th>
                <th>predict</th>
                <th>pred</th>
                <th>valueBet</th>
            </tr>
        </thead>
        <tbody id="data-container"></tbody>
    </table>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            fetchCSVData();
        });

        async function fetchCSVData() {
            try {
                const response = await fetch('/show_odds');
                if (!response.ok) {
                    throw new Error('Failed to fetch data');
                }
                const data = await response.json(); // 假设服务器返回的是JSON格式的数据

                // 假设headers数组是从CSV的表头或服务器返回的元数据中获得的
                const headers = ['league', 'bs_num_id', 'bs_time', 'hometeam', 'awayteam', 'home_odd', 'draw_odd', 'away_odd', 'home', 'draw', 'away', 'pred_home', 'pred_draw', 'pred_away', 'predict', 'pred', 'valueBet'/* ... 其他表头 ... */];

                const tbody = document.getElementById('data-container');
                tbody.innerHTML = ''; // 清除旧数据（如果有）

                data.forEach(row => {
                    const tr = document.createElement('tr');
                    headers.forEach(header => {
                        // 假设所有的数据对象都有headers数组中指定的属性
                        const td = document.createElement('td');
                        td.textContent = row[header] || ''; // 使用空字符串作为默认值以防属性不存在
                        tr.appendChild(td);
                    });
                    tbody.appendChild(tr);
                });
            } catch (error) {
                console.error('Error fetching data:', error);
                // 在这里添加显示错误消息的代码
            }
        }
    </script>
</body>
</html>